<script setup lang="ts">
import {computed, onBeforeMount, onMounted, ref, watch} from "vue";
import {useAppConfigStore} from "@/store/system/appConfigStore";
import {HeartOutlined, HeartTwoTone} from '@ant-design/icons-vue'
import _ from "lodash";
import {addCollect, deleteCollect, getCollectCount} from "@/api/collect/collect";
import {ECode} from "@/util/commonUtil";
import {userConfigStore} from "@/store/user/userConfigStore";
import {message} from "ant-design-vue";
import {loginConfigStore} from "@/store/user/loginConfigStore";
import {useSysEventStore} from "@/store/system/SysEventStore";
import { v4 as uuidV4 } from 'uuid';

let componentShowMap = computed(() => useAppConfigStore().componentShowMap)
const collectCount = ref<number>(0)
const isCollect = ref<boolean>(false)

// 定义 CollectProps 类型
interface CollectProps {
  bizUid: string;
  collectType: string;
  collectCountValue: number;
  isCollectValue: boolean;
}

const props = defineProps<CollectProps>();

onBeforeMount(() => {
  checkCollectStatus()
})

onMounted(() => {
  getComponentShowMap()
})

watch(() => [props.bizUid, props.collectCountValue], () => {
  checkCollectStatus()
})

watch(() => useAppConfigStore().componentShowMap, () => {
  getComponentShowMap()
})

function getComponentShowMap() {
  componentShowMap = computed(() => useAppConfigStore().componentShowMap)
}

function checkCollectStatus() {
  if (!props.bizUid) {
    return
  }
  // 有值直接返回
  if (!_.isUndefined(props.isCollectValue) && !_.isUndefined(props.collectCountValue)) {
    isCollect.value = props.isCollectValue
    collectCount.value = props.collectCountValue
    return
  }
  let params: any = {}
  params.bizUid = props.bizUid
  params.collectType = props.collectType
  getCollectCount(params).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      let collectData = response.data
      isCollect.value = collectData.isCollect
      collectCount.value = collectData.collectCount
    } else {
      isCollect.value = false
    }
  })
}

function collect() {
  const isLogin = computed(() => userConfigStore().isLogin)
  if (!isLogin.value) {
    message.warning('登录后才可以收藏~')
    // 未登录，自动弹出登录框
    loginConfigStore().setLoginMessage(Math.random())
    return
  }
  let params: any = {}
  params.bizUid = props.bizUid
  params.collectType = props.collectType
  addCollect(params).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      message.success(response.message)
      isCollect.value = true
      collectCount.value = collectCount.value + 1
      // 触发收藏事件
      useSysEventStore().setCollectMessage(uuidV4())
    } else {
      message.warning(response.message)
    }
  })
}

function cancelCollect() {
  const isLogin = computed(() => userConfigStore().isLogin)
  if (!isLogin.value) {
    message.warning('登录后才可以取消收藏~')
    // 未登录，自动弹出登录框
    loginConfigStore().setLoginMessage(Math.random())
    return
  }
  let params: any = {}
  params.bizUid = props.bizUid
  params.collectType = props.collectType
  deleteCollect(params).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      message.success(response.message)
      isCollect.value = false
      collectCount.value = collectCount.value - 1
      useSysEventStore().setCollectMessage(uuidV4())
    } else {
      message.warning(response.message)
    }
  })
}
</script>

<template>
  <div class="Collection" v-if="componentShowMap.showUserCollect">
    <i v-if="!isCollect || collectCount === 0" class="list-none cursor-pointer not-italic" @click="collect" title="收藏">
      <HeartOutlined/>
      <span v-if="collectCount > 0" class="ml-1">{{ collectCount }}</span>
    </i>
    <i v-else class="list-none cursor-pointer not-italic" @click="cancelCollect" title="已收藏">
      <HeartTwoTone/>
      <span v-if="collectCount > 0" class="ml-1">{{ collectCount }}</span>
    </i>
  </div>
</template>

<style scoped lang="less">

</style>
